<template>
  <ElBreadcrumb style="margin: 20px 0" :separator-icon="ArrowRight">
    <ElBreadcrumbItem @click="emits('navigate')">全部文件</ElBreadcrumbItem>
    <ElBreadcrumbItem
      v-for="folder in folderStack"
      :key="folder.id"
      @click="emits('navigate', folder.id)"
    >
      {{ folder.name }}
    </ElBreadcrumbItem>
  </ElBreadcrumb>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'

const { folderStack } = defineProps({
  folderStack: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['navigate'])
</script>

<style scoped>
:deep(.el-breadcrumb__inner) {
  cursor: pointer !important;
}

:deep(.el-breadcrumb__inner:hover) {
  color: var(--el-color-primary) !important;
}
</style>
